<template>
	<view class="container">
		<view class="uni-form-item uni-column">
			<uni-icons type="search" size="18" color="#9F9F9F"></uni-icons>
			<input class="uni-input" placeholder-style="color:#9F9F9F" placeholder="搜索频道" />
		</view>

		<uniSegmentedControl :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			active-color="#33D6A6" style="width: 235px;overflow: inherit;">
		</uniSegmentedControl>

		<view class=" content">
			<view v-show="current === 0">
				<view class="tvListCss" v-for="(item,index) in tvList" :key="index" @click="onClickTv(item)">
					<image :src="item.url" mode="" style="height: 140rpx;width: 184rpx;margin-right: 24rpx;"></image>
					<view class="tv_type">
						<text>{{item.title}}</text>
						<view style="font-size: 24rpx; ">
							<text>正在播放：</text>
							<text style="color:#E44545;">{{item.now}}</text>
						</view>
						<view style="font-size: 24rpx;color:#9F9F9F ; ">
							<text>稍后播放：</text>
							<text>{{item.soon}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current === 1">
				<view class="tvListCss" v-for="item in tvList">
					<image :src="item.url" mode="" style="height:140rpx;width: 184rpx;margin-right: 24rpx;"></image>
					<view class="tv_type">
						<text>{{item.title}}</text>
						<view style="font-size: 24rpx; ">
							<text>正在播放：</text>
							<text style="color:#E44545;">{{item.now}}</text>
						</view>
						<view style="font-size: 24rpx;color:#9F9F9F ; ">
							<text>稍后播放：</text>
							<text>{{item.soon}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current === 2">
				<text>333</text>
			</view>
			<view v-show="current === 3">
				<text>4444</text>
			</view>
		</view>


	</view>
</template>

<script>
	import uniSegmentedControl from '@/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue'
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				current: 0,
				items: ['全部', '本地', '央视', '卫视'],
				tvList: [{
					url: '../../../static/image/video/cctv1.png',
					title: 'CCTV-1 综合',
					now: '法制频道',
					soon: '走进科学',
				}, {
					url: '../../../static/image/video/cctv1.png',
					title: 'CCTV-2 综合',
					now: '法制频道',
					soon: '走进科学',
				}, {
					url: '../../../static/image/video/cctv1.png',
					title: 'CCTV-3 综合',
					now: '法制频道',
					soon: '走进科学',
				}]

			}
		},


		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			onClickTv(item) {
				uni.navigateTo({
					url: `./detailsTv?type=${encodeURIComponent(JSON.stringify(item.title))}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;

		.uni-form-item {
			background: #F3F4F6;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			padding: 10rpx 24rpx;
			margin-bottom: 16rpx;

			.uni-input {
				margin-left: 20rpx;
			}
		}

		.uni-padding-wrap {
			// width: 750rpx;
			padding: 0px;
		}


		.content {
			margin-top: 8rpx;
		}

		.tvListCss {
			width: 100%;
			height: 188rpx;
			display: flex;
			align-items: center;
			border-bottom: 2px solid #F8F8F8;

			.tv_type {
				font-weight: 400;
				display: flex;
				flex-flow: column;
				justify-content: space-evenly;
				height: 100%;
			}
		}
	}
</style>
